<template>
  <el-dialog 
    title='新增'
    :visible.sync="visible"
    @close='handleClose'
    @open='handleOpen'
    top='16vh'
    size='tiny'
    >
    <div class="form-wrap">
      <el-form ref='datasManageForm' :model='form' :rules="rules" label-position='left' label-width="120px">

        <el-form-item label='通用角色名称' prop='name'>

          <el-input v-model='form.name' style='width:219px' />

        </el-form-item>

        <el-form-item label='备注' prop='remark'>

          <el-input type='textarea' v-model='form.remark' style='width:219px' />

        </el-form-item>

      
      </el-form>
    </div>

    <span slot="footer">
      <el-button type='primary' @click.stop="handleSure('datasManageForm')">添 加</el-button>
    </span>

  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Message, Checkbox } from 'element-ui'
Vue.use(Checkbox)
import Bus from './bus'
export default {
  
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {

    return {
      visible: false,
      form: {
        name: '',
        remark: ''
      },
      rules: {
        name: [
          {
            required: true, message:'请输入通用角色名称', trigger: 'submit'
          }
        ]
      },

    }
  },

  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    }
  },

  methods: {


    handleOpen () {

      this.form.name = ''
      this.form.remark = ''
    },

    handleClose () {

      this.$emit("update:dialogVisible", false)

    },

    handleSure (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {


          const params = {
            name: this.form.name,
            remark: this.form.remark
          }
          this.Axios
            .Post('/wfConfAssigneeCommonRole/addCommonRole', params)
            .then(res => {

              if (res.data.status == 1) {

                Message({
                  type: 'success',
                  message: res.data.message
                })

                Bus.$emit('refresh', Math.random())
              }

              this.handleClose()
            })


        } else {

          return false
        }
      })
    },

  },
}
</script>

<style lang='less' scoped>
.form-wrap {
  padding: 10px 30px 0 20px;
}
</style>
